<template>
  <div>
    <div class="playController" v-if="playlist.tracks">
      <div class="left" @click="show = !show">
        <img :src="playlist.tracks[playCurrentIndex].al.picUrl" alt="" />
        <div class="content">
          <div class="title">
            {{ playlist.tracks[playCurrentIndex].al.name }}
          </div>
          <div class="tips">横滑可以切换上下首哦{{ controllerPaused }}</div>
        </div>
      </div>
      <div class="right">
        <svg class="icon" aria-hidden="true" @click="play">
          <use v-if="controllerPaused" xlink:href="#icon-bofang1"></use>
          <use v-else xlink:href="#icon-tingzhi1"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao"></use>
        </svg>
      </div>
      <audio
        ref="audio"
        :src="`https://music.163.com/song/media/outer/url?id=${playlist.tracks[playCurrentIndex].id}.mp3`"
      ></audio>

      <!-- 播放音乐的页面 -->
      <play-music
        v-show="show"
        @controllerShow="controllerShow"
        @play="play"
        :paused="controllerPaused"
        :playDetail="playlist.tracks[playCurrentIndex]"
      ></play-music>
    </div>
  </div>
</template>

<script>
import playMusic from "@/components/playMusic.vue";
import { mapState } from "vuex";
export default {
  name: "playController",
  data() {
    return {
      paused: true,
      isChange: false,
      show: false,
      interValId: null,
    };
  },
  components: { playMusic },
  computed: {
    ...mapState(["playlist", "playCurrentIndex"]),
    controllerPaused: function () {
      //切换playCurrentIndex值时触发
      let result = true || this.playCurrentIndex;
      if (this.isChange) {
        result = this.paused;
        this.isChange = false;
      }
      this.isChange = false;
      return result;
    },
  },
  methods: {
    play() {
      this.isChange = true;
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.paused = false;
        this.updateTime();
      } else {
        this.$refs.audio.pause();
        this.paused = true;
        clearInterval(this.interValId);
        this.interValId = null;
      }
    },
    controllerShow() {
      this.show = !this.show;
    },

    updateTime(content) {
      //获取当前歌曲的播放时间
      if (!this.interValId) {
        this.interValId = setInterval(() => {
          this.$store.commit("setCurrentTime", this.$refs.audio.currentTime);
        }, 1000);
      }
    },

    async getLyric() {
      await this.$store.dispatch("getLyric", {
        id: this.playlist.tracks[this.playCurrentIndex].id,
      });
    },
  },
  watch: {
    playCurrentIndex: async function (newVal, oldVal) {
      //重新选取歌曲，歌词、进度条要重新设置
      if (newVal !== undefined) await this.getLyric();
      this.$store.commit("setCurrentTime", 0);
      this.paused = true;
    },
  },
  async mounted() {
    setTimeout(async () => {
      await this.getLyric();
      if (!this.paused) {
        this.updateTime();
      }
    }, 500);
  },
};
</script>
<style lang="less" scoped>
.playController {
  width: 7.5rem;
  height: 1.2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  background: #fff;
  .left {
    display: flex;
    padding: 0 0.1rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
    }
    .content {
      padding: 0 0.2rem;
      .tips {
        font-size: 0.2rem;
        color: #999;
      }
    }
  }
  .right {
    .icon {
      margin: 0 0.1rem;
      width: 0.5rem;
      height: 0.5rem;
    }
  }
}
</style>